<template>
  <el-drawer title="配置模板" :before-close="handleClose" :visible.sync="open" direction="rtl" :size="'60%'"
             custom-class="demo-drawer" ref="drawer" v-loading="loading1">
    <div class="demo-drawer__content">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="100">
        <vxe-form-item field="content" span="24" :item-render="{}">
          <template #default="{ data }">
            <CommonEditor :value="data.content" style="height: 80vh" @input="changeTextarea"></CommonEditor>
          </template>
        </vxe-form-item>
      </vxe-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="$refs.drawer.closeDrawer()">
          确 定
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>


<script>
import CommonEditor from "@/components/CommonEditor.vue";

export default {
  name: 'setting',
  components: {CommonEditor},
  data() {
    return {
      axios: this.$axiosGen, // 请求的微服务，默认授权服务
      open: false,
      loading1: false,
      form: {
        info: {},
        rules: { //表单验证
          content: [{required: true, message: "不能为空", trigger: "blur"}]
        }
      }
    }
  },
  methods: {
    initDialog(params) {
      this.form.info = params.row;
      this.open = true;
    },
    handleClose() {
      this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading1 = true
            let config = {
              url: "/templateInfo/configTemplateContent",
              method: 'post',
              data: {id: this.form.info.id, content: this.form.info.content}
            }
            this.axios(config).then(res => {
              this.open = false;
            }).finally(() => {
              this.loading1 = false
            });
          })
          .catch(_ => {
            this.cancelForm()
          });
    },
    cancelForm() {
      this.open = false;
    },
    changeTextarea(val) {
      this.form.info.content = val
    }
  }
}
</script>
